import React, {useEffect, useState} from 'react';
import styles from "./index.less";

const LoadingCard = ({loading}) => {
  const [colors, setColors] = useState(['#ACDDE0', '#ACDDE0', '#ACDDE0', '#ACDDE0']);
  const [topPositions, setTopPositions] = useState([0, 0, 0, 0]);
  const [activeDot, setActiveDot] = useState(0);
  const [number, setNumber] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setTopPositions(prevTopPositions => {
        const updatedPositions = [...prevTopPositions];
        updatedPositions[activeDot] = updatedPositions[activeDot] === -8 ? 8 : -8;
        return updatedPositions;
      });
      setActiveDot(prevActiveDot => (prevActiveDot + 1) % 4);
    }, 100);

    const numberInterval = setInterval(() => {
      setNumber(prevNumber => prevNumber + 0.1);
    }, 100);

    return () => {
      clearInterval(interval);
      clearInterval(numberInterval);
    };
  }, [activeDot]);

  return (
    <div style={{width:'100%',height:'100%',display:'flex',justifyContent:'center',alignContent:'center',alignItems:'center'}}>
      {colors.map((color, index) => (
        <div
          key={index}
          className={styles.loadingItem}
          style={{
            top: topPositions[index],
          }}
        />
      ))}
      <div style={{width:'auto',height:'100%',display:'flex',justifyContent:'center',alignContent:'center',alignItems:'center',marginLeft:'1vw'}}>{number.toFixed(1)}s</div>
    </div>
  );
};

export default LoadingCard
